export default {
    name: "productList",
    setup() {
        const router = VueRouter.useRouter();
        const isLoading = ref(true);
        const productList = ref([]);
        const pagination = reactive({
            page: 1,
            pageSize: 12,
            total: 0
        });

        // 获取商品列表
        const loadProducts = async () => {
            isLoading.value = true;
            const res = await getproducts({
                page: pagination.page,
                pageSize: pagination.pageSize
            });
            productList.value = res.items.map(item => {
                return {
                    ...item,
                    cover: item.Photo || 'https://zp.kzhgzs.cn/uploads/blog/1742436887865088442.jpg'
                };
            });
            pagination.total = res.total;
            isLoading.value = false;
        };

        // 跳转详情页
        const goDetail = (id) => {
            router.push({ name: 'productview', params: { id } });
        };

        // 立即兑换
        const quickPurchase = async (product) => {
            if (product.Stock < 1) return;
            await goDetail(product.ID);//直接跳转
            return;
            // const res = await purchaseproduct({ id: product.ID });
            // ElMessage.success('兑换成功');
            // setTimeout(function() {
            //     goDetail(product.ID);
            // }, 500);
        };

        onMounted(() => {
            document.title = '积分商城';
            loadProducts();
        });

        return {
            isLoading,
            productList,
            pagination,
            goDetail,
            quickPurchase,
            loadProducts
        };
    },
    template: `
<div class="list-container">
    <div style="color:#fff;text-align:center;"><h1>积分商城</h1></div>
    <!-- 筛选工具栏 -->
    <div class="toolbar">
        <div class="filter-group">
            <el-input 
                placeholder="搜索商品名称" 
                clearable 
                @change="loadProducts">
                <template #prefix>
                    <el-icon><Search /></el-icon>
                </template>
            </el-input>
        </div>
    </div>

    <!-- 商品列表 -->
    <el-row v-loading="isLoading" :gutter="24">
        <el-col 
            v-for="item in productList" 
            :key="item.ID"
            :xs="24" 
            :sm="12" 
            :md="8" 
            :lg="6"
            class="product-col">
            <div class="product-card">
                <!-- 商品封面 -->
                <div class="card-image" @click="goDetail(item.ID)">
                    <el-image 
                        :src="item.cover"
                        fit="cover"
                        :preview-src-list="[item.cover]">
                        <template #error>
                            <div class="image-fallback">
                                <el-icon><Picture /></el-icon>
                                <span>封面加载失败</span>
                            </div>
                        </template>
                    </el-image>
                    <!-- 角标 -->
                    <div class="badges">
                        <el-tag 
                            v-if="item.Stock <= 0"
                            type="danger" 
                            effect="dark"
                            class="stock-tag">
                            已售罄
                        </el-tag>
                        <el-tag
                            type="warning"
                            effect="dark"
                            class="points-tag">
                            {{ item.Points }}积分
                        </el-tag>
                    </div>
                </div>

                <!-- 商品信息 -->
                <div class="card-body">
                    <h3 class="title" @click="goDetail(item.ID)">{{ item.Name }}</h3>

                    <!-- 操作区 -->
                    <div class="action-area">
                        <el-button
                            type="primary"
                            size="small"
                            :disabled="item.Stock <= 0"
                            @click.stop="quickPurchase(item)">
                            <el-icon><ShoppingCart /></el-icon>
                            立即兑换
                        </el-button>
                        <el-button 
                            type="info"
                            size="small"
                            @click.stop="goDetail(item.ID)">
                            查看详情
                        </el-button>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>

    <!-- 分页 -->
    <div class="pagination-wrap">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :total="pagination.total"
            v-model:current-page="pagination.page"
            @current-change="loadProducts"
            :page-size="pagination.pageSize">
        </el-pagination>
    </div>
</div>
    `
}